<style>
    @media screen and (max-width: 600px) {
	.page-body,.page-tab-content,.layui-colla-content{padding:0px;}
	.layui-table td, .layui-table th{padding:5px 2px; text-align:center;}
	.fixed-bar .layui-input {width:80px;}
}
.color0{color:blue;}
.color2{color:red;}
.color3{color:black;}
</style>
<form class="layui-form" action="{:url()}" method="post" id="editForm">
    
    <div class="layui-form-item">
	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
		<legend>扎数信息 <a href="javascript:void(0)" class="layui-btn layui-btn-primary layui-btn-xs zhahao-add"><i class="layui-icon">&#xe654;</i></a> </legend>
	</fieldset>
	<div class="layui-form zhahao-list">
		<table class="layui-table">
			<thead>
				<tr>
					<th>扎号</th>
					<th>件数</th>
					<th>码数</th>
					<th>床号</th>
					{if condition="env('jinpeng_api_status') eq 1"}
					<th>删除/金鹏数量/同步状态/上传</th>
					{/if}
				</tr>
			</thead>
			<tbody>
				{foreach $ouList as $ouKey=>$ouVal }
					<tr class="item-{$ouVal['zhahao']}">
						<td><input type="text" name="zhahao[]" value="{$ouVal['zhahao']}" autocomplete="off" class="layui-input" lay-verify="required|number"></td>
						<td><input type="text" name="jianshu[]" value="{$ouVal['jianshu']}" autocomplete="off" class="layui-input" lay-verify="required|number"></td>						
						<td>
						<select class="" name="size_name[]">
							{foreach $sizeNameArr as $sv}
							<option value="{$sv}" {if ($sv == $ouVal['size_name'])}selected{/if} >{$sv}</option>
							{/foreach}
						</select>
						</td>
						<td><input type="text" name="chuanghao[]" value="{$ouVal['chuanghao']}" autocomplete="off" class="layui-input" lay-verify="required|number"></td>
						{if condition="env('jinpeng_api_status') eq 1"}
						<td>
							<a href="javascript:void(0)" class="layui-btn layui-btn-danger layui-btn-sm btn-del" refresh="false" callback="callbackDel">
								<i class="layui-icon">&#xe640;</i>
							</a>
                            <span>{$ouVal['jinpeng_qty']}&nbsp;</span>
                            <span class='color{$ouVal['jinpeng_status']}'>{:arrayGet($jinpengStatus,$ouVal['jinpeng_status'],'')}&nbsp;</span>
                            <a href="{:url('Cutting/syncJinpengCut',['order_id' => $oInfo['id'],'action'=>'edit','mid'=>$ouVal['mid']])}" class="layui-btn layui-btn-sm layui-btn-primary hisi-ajax" title="上传至金鹏">上传</a>
						</td>
						{/if}										
					</tr>
				{/foreach}
			</tbody>
		</table>
	</div>
    <div class="pop-bottom-bar">
    	<input type="hidden" class="field-id" name="order_id">
        <button type="submit" class="layui-btn layui-btn-normal" lay-submit="" lay-filter="formSubmit" hisi-data="{pop: true, refresh: true}">提交保存</button>
		<a href="javascript:parent.layui.layer.closeAll();" class="layui-btn layui-btn-primary ml10">取消</a>
    </div>
</form>

{include file="system@block/layui" /}
    
<script>
    var formData = {:json_encode($oInfo)};
    var sizeNameArr = {:json_encode($sizeNameArr)};
    layui.use(['form', 'func', 'tool', 'layer', 'laydate'], function() {
        var $ = layui.jquery;
        var form = layui.form;
        var layer = layui.layer;
        var laydate = layui.laydate;
        layui.func.assign(formData);
        
        form.render();
		var reg = /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/;
        form.verify({
        	mimonumber: function(value, item){
        	    if (value=='') return '';
        	    if(! reg.test(value)){
        	    	return '只能填写数字';
        	    }
        	}
        });

        /* 绑定多个日期控件 */
        $('.layui-date').each(function(i) {
            var t = $(this), option = {
                elem: this,
                type: t.attr('laydate-type'),
                mark: {'{:$today}':''},
                trigger: 'click'
            };

            laydate.render(option);
        });
        
     	// 添加扎数
        $(document).on('click', '.zhahao-add',function(){
        	var html='<tr>';
        	html += '<td><input type="text" name="zhahao[]" value="" autocomplete="off" class="layui-input" lay-verify="required|number"></td>';
        	html += '<td><input type="text" name="jianshu[]" value="" autocomplete="off" class="layui-input" lay-verify="required|number"></td>';
        	html += '<td><select class="" name="size_name[]">';
			for(var i in sizeNameArr) {
				html += '<option value="'+sizeNameArr[i]+'">'+sizeNameArr[i]+'</option>';
			}
			html += '</select></td>';
        	html += '<td><input type="text" name="chuanghao[]" value="" autocomplete="off" class="layui-input" lay-verify="required|number"></td>';
        	html += '<td><a href="javascript:void(0)" class="layui-btn layui-btn-danger layui-btn-sm btn-del"><i class="layui-icon">&#xe640;</i></a></td>';
        	// html += '<td></td>';
        	html += '<tr>';
        	$('.zhahao-list table tbody').append(html);
        	form.render();
		});
		//删除回调
        // window.callbackDel = function(obj, res) {
		// 	if(res.code == 1) {
		// 		 var zhahao = res.data.zhahao;
		// 		 $('.item-'+zhahao).remove();
		// 	}
		// };
		// 删除条目
        $(document).on('click', '.btn-del',function(){
			$(this).parents('tr').remove();
		});
    });
</script>